$(function  () {
           
            var h5 = new H5();

            h5.whenAddPage = function(){
                this.addComponent('slide_up',{
                    bg:'imgs/footer.png',
                    css:{
                        opacity:0,
                        left:0,bottom:-20,
                        width:'100%',height:'20px',zIndex:999
                    },
                    animateIn:{
                        opacity:1,bottom:'-1px'
                    },
                    animateOut:{
                        opacity:0,bottom:'-20px'
                    },
                    delay:500
                });
            }

            h5
            .addPage('face')
                .addComponent('logo',{
                    center:true,
                    width:395,
                    height:130,
                    bg:'imgs/face_logo.png',
                    css:{opacity:0},
                    animateIn:{top:100,opacity:1},
                    animateOut:{top:0,opacity:0},
                })
                .addComponent('slogan',{
                    center:true,
                    width:365,
                    height:99,
                    bg:'imgs/face_slogan.png',
                    css:{opacity:0,top:180},
                    animateIn:{left:'50%',opacity:1},
                    animateOut:{left:'0%',opacity:0},
                    delay:500
                })
                .addComponent('face_img_left',{
                    width:370,
                    height:493,
                    bg:'imgs/face_img_left.png',
                    css:{opacity:0,left:-50,bottom:-50},
                    animateIn:{opacity:1,left:0,bottom:0},
                    animateOut:{opacity:0,left:-50,bottom:-50},
                    delay:1000
                })
                .addComponent('face_img_right',{
                    width:276,
                    height:449,
                    bg:'imgs/face_img_right.png',
                    css:{opacity:0,right:-50,bottom:-50},
                    animateIn:{opacity:1,right:0,bottom:0},
                    animateOut:{opacity:0,right:-50,bottom:-50},
                    delay:1000
                })
            .addPage()
                .addComponent('caption',{text:'研究方向'})
                .addComponent('text',{
                    width:500,
                    height:30,
                    center:true,
                    text:'袁荃组=最好选择',
                    css:{
                        opacity:0,textAlign:'center',color:'red',fontSize:'26px'
                    },
                    animateIn:{opacity:1,top:120},
                    animateOut:{opacity:0,top:240},
                })
                .addComponent('description',{
                    center:true,
                    width:481,
                    height:295,
                    bg:'imgs/description_bg.gif',
                    css:{
                        opacity:0,
                        padding:'15px 10px 10px 10px',
                        color:'#fff',
                        fontSize:'15px',
                        lineHeight:'18px',
                        textAlign:'justify',
                        top:240
                    },
                    text:'我们的方向主要是：多功能纳米材料的设计与制备，基于DNA的纳米复合材料在生物医学领域的应用，基于稀土发光纳米材料的分析检测和生物成像',
                    animateIn:{opacity:1,top:190},
                    animateOut:{opacity:0,top:240},
                    delay:1000
                })
                .addComponent('people',{
                    center:true,
                    width:515,
                    height:305,
                    bg:'imgs/p1_people.png',
                    css:{
                        opacity:0,
                        bottom:0
                    },
                    animateIn:{opacity:1,bottom:40},
                    animateOut:{opacity:0,bottom:0},
                    delay:500
                })
            
            .addPage()
                .addComponent('caption',{text:'文章发表（分区）'})//polyline
                .addComponent('polyline',{
                    type:'polyline',
                    data:[['一区',.54,'#ff7676'],['二区',.1,'blue'],['三区',.36]],
                    width:530,
                    height:300,
                    center:true,
                    css:{opacity:0,top:200},
                    animateIn:{opacity:1,top:250},
                    animateOut:{opacity:0,top:100},
                })
                .addComponent('msg',{
                    text:'一区文章数占到54%',
                    css:{
                        opacity:0,top:160,
                        textAlign:'center',width:'100%',color:'#ff7676'
                    },
                    animateIn:{ opacity:1},
                    animateOut:{ opacity:0}
                })


            .addPage()
                .addComponent('caption',{text:'文章发表（IF）'})//pie
                .addComponent('pie',{
                    type:'pie',
                    data:[
                        ['>10' , .16  ,'#ff7676'],
                        ['5-10' , .47 ],
                        ['<5' , .37],
                    ],
                    css:{top:200},
                    width:300,
                    height:300,
                    center:true
                })
                .addComponent('msg',{
                    text:'影响因子5-10文章占到47%',
                    css:{
                        opacity:0,bottom:120,
                        textAlign:'center',width:'100%',color:'#ff7676'
                    },
                    animateIn:{ opacity:1},
                    animateOut:{ opacity:0}
                })
            .addPage() //bar（bar_v）
                .addComponent('caption',{text:'文章发表（时间）'})
                .addComponent('bar',
                            {
                                type : 'bar',
                                
                                width : 530,
                                height : 600,
                                data:[
                                    ['2011' , .2 ],
                                    ['2012' , .35  ],
                                    ['2013' , .15 ],
                                    ['2014' , .25  ],
                                    ['2015' , .4 ],
                                    ['2016' , .4 ],
                                    ['2017' , .55,'#ff7676' ]
                                ],
                                css : {
                                    top:100,
                                    opacity:0
                                },
                                animateIn:{
                                    opacity:1,
                                    top:200,
                                },
                                animateOut:{
                                    opacity:0,
                                    top:100,
                                },
                                center : true,
                            }
                )
                .addComponent('msg',{
                    text:'2017年已经发表11篇文章',
                    css:{
                        opacity:0,bottom:120,
                        textAlign:'center',width:'100%',color:'#ff7676'
                    },
                    animateIn:{ opacity:1},
                    animateOut:{ opacity:0}
                })

            .addPage()
                .addComponent('caption',{text:'研究内容关键词'})//radar

                .addComponent('radar',{
                    type : 'radar',
                    width : 400,
                    height : 400,
                    data:[
                        ['疾病监测' , .9  ,'#ff7676'],
                        ['上转换' , .8 ],
                        ['长余辉' , .7  ],
                        ['骨修复' , .6  ],
                        ['稀土' , .5 ]
                    ],
                    css : {
                        top:100,
                        opacity:0
                    },
                    animateIn:{
                        opacity:1,
                        top:200,
                    },
                    animateOut:{
                        opacity:0,
                        top:100,
                    },
                    center : true,
                })
            .addPage()
                .addComponent('caption',{text:'各年级学生分布'})//ring
                .addComponent('ring-all',{
                    type : 'ring',center : true,
                    width : 300,height : 300,
                    data:[['博士' , .2  ,'#ff7676']],
                    css : { top:120,opacity:0 ,fontSize:'30px'},
                    animateIn: { opacity:1},
                    animateOut:{ opacity:0},
                })
               .addComponent('msg',{
                    text:'每年都有新鲜血液的加入',
                    css:{
                        opacity:0,top:300,
                        textAlign:'center',width:'100%',color:'#ff7676'
                    },
                    animateIn:{ opacity:1},
                    animateOut:{ opacity:0},
                    delay:1800,
                })
                .addComponent('ring-1',{
                    type : 'ring',center : true,
                    width : 140,height : 140,
                    data:[['硕士2015' , 0.12  ,'darkorange']],
                    css : { left:30,bottom:110,opacity:0,fontSize:'12px' },
                    animateIn: { opacity:1},
                    animateOut:{ opacity:0},
                })
                .addComponent('ring-2',{
                    type : 'ring',
                    width : 140,height : 140,
                    data:[['硕士2014' , 0.06  ,'darkorange']],
                    css : { left:30,bottom:110,opacity:0,fontSize:'12px' },
                    animateIn: { opacity:1},
                    animateOut:{ opacity:0},
                })
                .addComponent('ring-3',{
                    type : 'ring',
                    width : 140,height : 140,
                    data:[['硕士2016' , .26  ,'darkorange']],
                    css : { right:30,bottom:110,opacity:0,fontSize:'12px' },
                    animateIn: { opacity:1},
                    animateOut:{ opacity:0},
                })
                .addComponent('ring-3',{
                    type : 'ring',
                    width : 140,height : 140,
                    data:[['硕士2017' , .17  ,'darkorange']],
                    css : { left:70,bottom:40,opacity:0,fontSize:'12px' },
                    animateIn: { opacity:1},
                    animateOut:{ opacity:0},
                })
                .addComponent('ring-3',{
                    type : 'ring',
                    width : 140,height : 140,
                    data:[['本科生' , .2  ,'darkorange']],
                    css : { right:70,bottom:40,opacity:0,fontSize:'12px' },
                    animateIn: { opacity:1},
                    animateOut:{ opacity:0},
                })

          .addPage()
                .addComponent('caption',{text:'性别分布'})//point
                .addComponent('point',{
                type : 'point',
                width : 300,
                height : 300,
                data:[
                    ['女生' , .68  ,'#ff99ee'],
                    ['男生' , .32  ,'#0099ff', 0 ,'-60%']
                   
                ],
                css : {
                    bottom:'20%'
                },
                center : true,
            })

            .addPage('tail')
                .addComponent('logo',{
                    center:true,
                    width:359,
                    height:129,
                    bg:'imgs/tail_logo.png',
                    css:{top:240,opacity:0},
                    animateIn:{opacity:1,top:210},
                    animateOut:{opacity:0,top:240},
                })
                .addComponent('slogan',{
                    center:true,
                    width:314,
                    height:46,
                    bg:'imgs/tail_slogan.png',
                    css:{top:280,opacity:0},
                    animateIn:{opacity:1,left:'50%'},
                    animateOut:{opacity:0,left:'0%'},
                    delay:500
                })
                .addComponent('share',{
                    width:128,
                    height:120,
                    bg:'imgs/tail_share.png',
                    css:{opacity:0,top:110,right:110},
                    animateIn:{opacity:1,top:10,right:10},
                    animateOut:{opacity:0,top:110,right:110},
                    delay:1000 
                })
                .addComponent('back',{
                    width:52,
                    height:50,
                    bg:'imgs/tail_back.png',
                    center:true,
                    onclick : function(){
                         $.fn.fullpage.moveTo( 1 )
                    }
                })

            .loader( [ 'imgs/tail_back.png','imgs/tail_share.png','imgs/tail_slogan.png' ] );

        });